<template>
	<view class="content">
		<view class="header">
			<view :style="{height: systemBarHeight + 'px'}">
			</view>
			<view class="navbar">
				<text>预 约</text>
			</view>

			<view class="tabs">
				<u-tabs :list="list4" lineWidth="10" lineColor="#53DDA8" :activeStyle="{
				            color: '#53DDA8',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#666666',
				            transform: 'scale(1)'
				        }" :scrollable="fasle" itemStyle="padding-bottom:20rpx;">
				</u-tabs>
			</view>

			<view class="list">
				<view class="list_item" v-for="(item,index) in yyList" :key="index">
					<view class="list_item_top">
						<view class="top_lf">
							<text>2025-01-01 10:00</text>
						</view>
						<view class="top_rg">
							<text class="top2" v-if="item.starts==0">待确认</text>
							<text class="top3" v-if="item.starts==1">已确认</text>
							<text class="top3" v-if="item.starts==2">未通过</text>
							<text class="top3" v-if="item.starts==3">已取消</text>
						</view>
					</view>
					
					<view class="list_item_zz">
						<text>小明 | 15012345678</text>
					</view>
					
					<view class="list_item_zzz">
						<view class="type1">
							<text>科目二</text>
						</view>
						<view class="type1">
							<text>2号车</text>
						</view>
					</view>
					
					<view class="list_item_zzzz">
						<image src="/static/xy/shijian.png" mode=""></image>
						<text>2025-01-01 10:00 至 2025-01-01 10:00</text>
					</view>
					
					<view class="list_item_bt1" v-if="item.starts==0">
						<view class="bt1">
							<text>拒 绝</text>
						</view>
						<view class="bt2">
							<text>同 意</text>
						</view>
					</view>
					<view class="list_item_bt2" v-if="item.starts==1">
						<text>驳 回</text>
					</view>
				</view>
			</view>
			
			<view class="updatepassword">
				<u-popup :show="uppasswordshow" :round="10" mode="center" @close="passwordclose" @open="passwordopen">
					<view class="password">
						<view class="password_img">
							<image src="/static/xy/ts.png" mode=""></image>
						</view>
						<view class="password_tit">
							<text>温馨提示</text>
						</view>
						<view class="password_tit1">
							<text>学员使用该平台需要支付5元使用费</text>
						</view>
						<view class="password_bt1" @click="updatepassword()">
							<text>去修改</text>
						</view>
						<view class="password_bt2" @click="passwordclose()">
							<text>暂不修改</text>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'reservation',
		data() {
			return {
				systemBarHeight: 0,
				uppasswordshow: true,
				list4: [{
					name: '待确认'
				}, {
					name: '已确认',

				}, {
					name: '未通过',
				}, {
					name: '已取消'
				}],

				yyList: [{
						starts: 0
					},
					{
						starts: 1
					},
					{
						starts: 2
					},
					{
						starts: 3
					},
					{
						starts: 3
					},
					{
						starts: 3
					},
					{
						starts: 3
					},
					{
						starts: 3
					}
				]
			}
		},
		mounted() {
			/* 手机顶部高度 */
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			passwordclose() {
				this.uppasswordshow = false
			},
			updatepassword(){
				uni.navigateTo({
					url:'/pages/index/updatepassword'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 750rpx;
padding-bottom: 100rpx;
		background: #F6F8F7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		background-image: url("");
		background-size: 100% 1624rpx;
		height: 1624rpx;
		background-repeat: no-repeat;
	}

	.navbar {
		height: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		align-items: center;
		color: #43484D;
		display: flex;
		justify-content: center;

	}

	.tabs {
		margin-top: 8rpx;
	}

	.list {
padding-bottom: 240rpx;
		.list_item {
			width: 93%;
			margin: 24rpx auto 0;
			padding-bottom: 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(25, 94, 68, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.list_item_top {
				width: 90%;
				margin: auto;
				padding-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top_lf {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #5C5C5C;

				}

				.top_rg {
					.top2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #F60000;
					}

					.top3 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #43484D;
					}
				}
			}
			.list_item_zz{
				width: 90%;
				margin: 32rpx auto 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #43484D;
				
			}
			.list_item_zzz{
				width: 90%;
				margin: 28rpx auto 0;
				display: flex;
				.type1{
					margin-right: 22rpx;
					width: 132rpx;
					height: 48rpx;
					background: #EBFFF7;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #459878;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.list_item_zzzz{
				width: 90%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 24rpx auto 0;
				height: 56rpx;
				background: #F6F6F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				>image{
					width: 32rpx;
					height: 32rpx;
					
				}
				>text{
					margin-left: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #43484D;
				}
			}
			.list_item_bt1{
				width: 84%;
				margin: 32rpx auto 0;
				display: flex;
				justify-content: space-between;
				.bt1{
					width: 271rpx;
					height: 64rpx;
					background: #F2F2F2;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #43484D;
					display: flex;
					align-items: center;justify-content: center;
				}
				.bt2{
					width: 271rpx;
					height: 64rpx;
					background: #53DDA8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					display: flex;align-items: center;justify-content: center;
				}
			}
			.list_item_bt2{
				width: 84%;
				margin: 32rpx auto 0;
				height: 64rpx;
				background: #53DDA8;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;justify-content: center;
			}
		}
	}
	
	.password {
		width: 616rpx;
		height: 594rpx;
		background: linear-gradient(180deg, #E4FFF5 0%, #FFFFFF 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	
		.password_img {
			display: flex;
			justify-content: center;
	
			>image {
				width: 160rpx;
				height: 160rpx;
				margin-top: -80rpx;
			}
		}
	
		.password_tit {
	
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 44rpx;
			color: #43484D;
			display: flex;
			justify-content: center;
			margin-top: 42rpx;
		}
	
		.password_tit1 {
			margin-top: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #5D5F5E;
			display: flex;
			justify-content: center;
		}
	
		.password_bt1 {
			width: 552rpx;
			height: 88rpx;
			background: #53DDA8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 80rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.password_bt2 {
			width: 552rpx;
			height: 88rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #D7D5D1;
			margin: 32rpx auto 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #43484D;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>